<template>
  <div class="LeaveData">
    <a-row :gutter="[24,24]">
      <!-- <a-card title="人数总览"> -->
      <a-col :lg="8" :md="12" :sm="24">
        <div class="headerBox">
          <div class="headerIcon">
            <i class="iconfont iconuser"></i>
          </div>
          <div class="headerTxt">
            <p class="headerNum">{{ onNumber }}</p>
            <p >目前在职人数</p>
          </div>
        </div>
      </a-col>
      <a-col :lg="8" :md="12" :sm="24">
        <div class="headerBox">
          <div class="headerIcon">
            <i class="iconfont iconlianxiaolianmanyi-"></i>
          </div>
          <div class="headerTxt">
            <p class="headerNum">{{ inNumber }}</p>
            <p >本月公司入职人数</p>
          </div>
        </div>
      </a-col>
      <a-col :lg="8" :md="12" :sm="24">
        <div class="headerBox">
          <div class="headerIcon">
            <i class="iconfont iconhuiyuanxiaohuojian"></i>
          </div>
          <div class="headerTxt">
            <p class="headerNum">{{ outNumber }}</p>
            <p >本月公司离职人数</p>
          </div>
        </div>
      </a-col>
      <!-- </a-card> -->
    </a-row>
    <!-- <a-col :span="24"> -->
    <div class="LeaveDataBody">
      <a-card title="本月小组数据" class="card" :bordered="false">
        <a-table
          :rowKey="(record,index)=> index"
          :columns="columns"
          :dataSource="data"
          :bordered="false"
          :loading="loading"
          :pagination="{ pageSize: 0 }"
        >
          <span slot="jdo_id" slot-scope="text">
            <a-button type="link" @click="goDetail(text)">查看详情</a-button>
          </span>
        </a-table>
      </a-card>
    </div>
    <!-- </a-col> -->

  </div>
</template>

<script>
import { getLeaveList } from '@/api/admin/user'
export default {
  name: 'LeaveData',
  data () {
    return {
      skeLoading: true,
      loading: false,
      inNumber: 0,
      onNumber: 0,
      outNumber: 0,
      columns: [
        {
          dataIndex: 'user',
          title: '小组'
        },
        {
          dataIndex: 'jdo_entry_num',
          title: '入职'
        },
        {
          dataIndex: 'jdo_leave_num',
          title: '离职'
        },
        {
          dataIndex: 'jdo_id',
          title: '查看详情',
          scopedSlots: { customRender: 'jdo_id' }
        }
      ],
      data: [
        // {
        //   id: 2,
        //   user: '张三',
        //   jdo_entry_num: 2,
        //   jdo_leave_num: 3
        // }
      ]
    }
  },

  computed: {},
  created () {
    this.getLeaveList()
  },
  mounted () {},
  methods: {
    getLeaveList () {
      this.loading = true
      getLeaveList()
        .then(res => {
          this.skeLoading = false
          this.inNumber = res.result.bency
          this.onNumber = res.result.eq.jdo_entry_num
          this.outNumber = res.result.eq.jdo_leave_num
          this.data = res.result.list.map(function (obj) {
            var rObj = {}
            rObj.jdo_id = obj.jdo_id
            rObj.user = obj.user
            rObj.jdo_entry_num = obj.jdo_entry_num
            rObj.jdo_leave_num = obj.jdo_leave_num
            return rObj
          })
          this.loading = false
          // console.log(res.result.list)
          // console.log(this.data)
          // this.data = res.result.list
        }).catch(err => {
          this.skeLoading = false
          this.loading = false
          console.log(err)
        })
    },
    goDetail (val) {
      // console.log(val)
      this.$router.push({
        // name: 'passGoods',
        path: `/admin/pass-goods`,
        query: {
          id: val
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.LeaveData{
  width: 100%;
  height: 100%;
  .headerBox{
     width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .headerIcon{
      width: 50%;
      height: 100px;
      line-height: 100px;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      background-color: #ededed;
      text-align: center;
      .iconfont {
        font-family: 'iconfont' !important;
        font-size: 50px;
        z-index: 999;
        color: #333131;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }
    .headerTxt{
      width: 50%;
      height: 100px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      background-color: #fff;
      text-align: center;
      p{
        font-size: 20px;
        margin-bottom:0;
        color: #bfbfbf;
      }
      .headerNum{
        font-size: 30px;
        font-weight: bold;
        padding-top: 9px;
        color: #656464;
      }
  }
  }
  .LeaveDataBody{
    margin-top: 20px;
  }
}
</style>
